<!-- 资讯首页 -->
<template>
  <div class="page-view">
    <van-pull-refresh
      v-model="refreshLoading"
      @refresh="onRefresh"
    >
      <van-tabs
        v-model="tabIndex"
        :line-width="5"
        :line-height="5"
        color="#04CABC"
        title-active-color="#04CABC"
        @click="tabClick"
      >
        <van-tab
          v-for="item in newsTypeList"
          :key="item.NewsTypeId"
          :title="item.Title"
        >
          <!-- 资讯分类 -->
          <div
            v-if="newsList.length > 0"
            class="news-list"
          >
            <!-- 资讯列表 -->
            <van-list
              v-model="moreLoading"
              finished-text="— 没有更多了 —"
              :finished="moreFinished"
              :immediate-check="false"
              class="news-list-ul"
              :offset="10"
              @load="onLoadMoreData"
            >
              <router-link
                v-for="news in newsList"
                :key="news.NewsId"
                :to="{name: 'newsDetail', query:
                  {newsId: news.NewsId, noNavbar: $route.query.noNavbar,
                   fromApp: $route.query.fromApp, instId: $route.query.instId}}"
                class="news-list-ul-li"
                tag="li"
              >
                <div
                  class="news-left-list"
                  title="news.Title"
                >
                  {{ news.Title }}
                </div>
                <div
                  class="news-date"
                >
                  {{ news.DateTime }}
                </div>
              </router-link>
            </van-list>
          </div>
          <div
            v-else
            class="no-data"
          >
            <NoData>暂无数据</NoData>
          </div>
        </van-tab>
      </van-tabs>
    </van-pull-refresh>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { AppInfo } from 'lib/appMethods'
import { SET_USER_INFO } from '@/store/mutations'
import { HTTP_CODES } from '@/plugins/http.plugin'
import { Swipe, SwipeItem, Pagination, PullRefresh } from 'vant'
export default Vue.extend({
  components: {
    'van-pull-refresh': PullRefresh,
    NoData: () => import('components/Class/NoData.vue'),
  },
  data () {
    return {
      tabIndex: 0,
      newsTypeList: [],
      newsList: [],
      newsTypeItem: {
        NewsTypeId: 0,
        Title: '',
      },
      currentPage: 1,
      sumPage: 0,
      refreshLoading: false,
      moreLoading: false,
      moreFinished: false,
    }
  },
  created () {
    this.newsAllTypeList()
  },
  methods: {

    onRefresh () {
      this.currentPage = 1
      setTimeout(() => {
        // 下拉刷新
        this.newsIndexList()
        this.$toast('刷新成功')
      }, 1500)
    },

    onLoadMoreData () {
      if (this.currentPage < this.sumPage) {
        this.currentPage++
        // 上拉加载
        this.newsIndexList()
      }
    },

    // 调用资讯首页分类和列表
    newsAllTypeList () {
      this.$axios({
        method: 'get',
        url: 'News/NewsTypeList',
        data: {
        },
      }, 0, () => {
        this.newsAllTypeList()
      }).then(res => {
        this.$set(this.$data, 'newsTypeList', res)
        this.newsIndexList()
      })
    },

    newsIndexList () {
      this.newsTypeItem = this.newsTypeList[this.tabIndex]
      let newsType = this.newsTypeItem.NewsTypeId
      this.$axios({
        method: 'get',
        url: 'News/NewsList',
        data: {
          Type: newsType,
          Page: this.currentPage,
          PageSize: 15,
        },
      }, 0, () => {
        this.newsIndexList()
      }).then(res => {
        this.$set(this.$data, 'sumPage', res.SumPage)
        if (this.currentPage === 1) {
          this.$set(this.$data, 'newsList', res.NewsList)
        } else {
          this.$set(this.$data, 'newsList',
            [...this.newsList, ...res.NewsList])
        }
        this.refreshLoading = false
        this.moreLoading = false

        if (this.currentPage >= this.sumPage) {
          this.moreFinished = true
        } else {
          this.moreFinished = false
        }
      })
    },

    tabClick () {
      this.currentPage = 1
      this.newsIndexList()
    },
  },

})
</script>
<style lang="scss" scoped>
  @import "~scss/news/news.scss";

.no-data {
  text-align: center;
  margin-top: 240px;
}
</style>
